<!--
 * @Author: your name
 * @Date: 2021-09-12 10:41:38
 * @LastEditTime: 2021-09-12 11:01:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ej-webui\src\pages\info\publish.vue
-->
<template>
    <div class="upLoad">
        <el-form :model="upData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="标题" prop="title" style="width: 700px" placeholder="请输入标题">
                <el-input v-model="upData.title"></el-input>
            </el-form-item>
            <el-form-item label="分类" prop="categoryId">
                 <el-select v-model="upData.categoryId" placeholder="请选择栏目" clearable>
                        <el-option v-for="(item,index) in selectData" :label="item.name" :key="index" :value="item.id"></el-option>
                 </el-select>
            </el-form-item>
            <el-form-item label="封皮" prop="cover">
                <el-upload
                    v-model="upData.cover"
                    class="avatar-uploader"
                    action="http://81.69.24.232/pet/jz_upload.php"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforephotoUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">文件大小不允许超过3M</div>
                </el-upload>    
            </el-form-item>
            <el-form-item label="正文" prop="content">
                <div id="div1" :model="upData.content">
                </div>
                <div class="submit">
                    <el-button type="warning" @click="toBack">返回</el-button>
                    <el-button type="success" @click="upFileHandler">发布</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import request from '@/utils/request'
import E from 'wangeditor'
import qs from 'qs'
export default {
    data() {
        return {
            selectData: [],
            ruleForm: '',
            rules: {
                title: [
                    { required: true, message: '请输入活动标题', trigger: 'blur' },
                ],
                categoryId: [
                    { required: true, message: '请输入栏目分类', trigger: 'change' },
                ],
            },
            ruleForm: [],
            imageUrl: {},
            upData: []
        }
    },
    methods: {
        beforephotoUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 3;
            if (!isLt2M) {
               this.$message.error('上传头像图片大小不能超过 3MB!');
            }
            return  isLt2M;
        },
        async categoryFindAll() {
            let res = await request.get('/category/findAll')
            this.selectData = res.data
        },
        toBack() {
            this.$router.push({
                path: 'article'
            })
        },
        handleAvatarSuccess(res,file) {
            this.upData.cover = res
            this.imageUrl = res
        },
        upFileHandler() {
          this.$refs['ruleForm'].validate((valid) => {
          if(valid) {
               request.post('/article/saveOrUpdate',qs.stringify(this.upData)).then( res => {
                this.$message.success(res.message);
                this.$router.go(-1);
            })
          }else{
            alert('错误提交');
            return false;
          }
        })
      },  
    },
    created() {
        this.categoryFindAll();
        this.handleAvatarSuccess()
    },
    mounted() {
        const editor = new E('#div1')
        editor.create()
    }
}
</script>

<style>
.demo-ruleForm .el-form-item:nth-child(2) {
    width: 300px;
    position: relative;
}
.demo-ruleForm .el-form-item:nth-child(3) {
    float: right;
    position: absolute;
    top: 20px;
    right: 200px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .demo-ruleForm .el-form-item:nth-child(4) {
    margin-top: 300px;
  }  
.demo-ruleForm .el-form-item:nth-child(4) .submit{
    float: right;
    margin-top: 20px;
}
</style>